<template>
	<view>
		<!-- <u-gap height="18" bg-color="#FFFFFF" v-if="magicList.length > 0 "></u-gap> -->
		<block v-for="(item,index) in magicList" :key="index" >
			<!-- 1_1编号样式 nx高300 -->
			<view v-if="item.styleVal == '1_1'" class="magicMain1" style="padding:0 15rpx;">
				<image :src="item.plusMagicList[0].picture" style="width:100%;max-height: 300rpx;" mode="widthFix" @tap="toPages(item.plusMagicList[0])"></image>
			</view>
			<!-- 1_2编号样式 300*360+450*360 -->
			<view v-if="item.styleVal == '1_2'" class="magicMain" style="padding: 0 15rpx;">
				<image :src="item.plusMagicList[0].picture" style="width: 300rpx;height: 360rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[0])"></image>
				<image :src="item.plusMagicList[1].picture" style="width: 450rpx;height: 360rpx;margin-left: 5rpx;" @tap="toPages(item.plusMagicList[1])"></image>
			</view>
			<!-- 1_3编号样式 280*360+(430*175+430*175)  -->
			<view v-if="item.styleVal == '1_3'" class="magicMain">
				<view style="height: 360rpx;margin: 0 10rpx;">
					<image :src="item.plusMagicList[0].picture" style="width: 280rpx;height: 360rpx;" @tap="toPages(item.plusMagicList[0])"></image>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;height: 360rpx;margin-right: 10rpx;">
					<image :src="item.plusMagicList[1].picture" style="width: 430rpx;height: 175rpx;margin-bottom: 10rpx;" @tap="toPages(item.plusMagicList[1])"></image>
					<image :src="item.plusMagicList[2].picture" style="width: 430rpx;height: 175rpx;" @tap="toPages(item.plusMagicList[2])"></image>
				</view>
			</view>
			<!-- 1_4编号样式 修改 -->
			<view v-if="item.styleVal == '1_4'" class="magicMain">
				<view style="width:290rpx;height: 360rpx;">
					<image :src="item.plusMagicList[0].picture" style="width: 290rpx;height: 360rpx;" @tap="toPages(item.plusMagicList[0])"></image>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;height: 360rpx;margin-left: 10rpx;">
					<image :src="item.plusMagicList[1].picture" style="width: 430rpx;height: 170rpx;margin-bottom: 10rpx;" @tap="toPages(item.plusMagicList[1])"></image>
					<view style="display: flex;align-items: center;height:180rpx">
						<image :src="item.plusMagicList[2].picture" style="width: 215rpx;height: 180rpx;" @tap="toPages(item.plusMagicList[2])"></image>
						<image :src="item.plusMagicList[3].picture" style="width: 215rpx;height: 180rpx;" @tap="toPages(item.plusMagicList[3])"></image>
					</view>
				</view>
			</view>
			<!-- 2_1编号样式 修改-->
			<view v-if="item.styleVal == '2_1'" class="magicMain2_1" style="padding: 0 15rpx;">
				<image :src="item.plusMagicList[0].picture" style="width: 370rpx;height: 240rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[0])"></image>
				<image :src="item.plusMagicList[1].picture" style="width: 370rpx;height: 240rpx;margin-left: 5rpx;" @tap="toPages(item.plusMagicList[1])"></image>
			</view>
			<!-- 2_2编号样式  240*240 -->
			<view v-if="item.styleVal == '2_2'" class="magicMain2_1" style="padding: 0 15rpx;">
				<image :src="item.plusMagicList[0].picture" style="width: 240rpx;height: 240rpx;" @tap="toPages(item.plusMagicList[0])"></image>
				<image :src="item.plusMagicList[1].picture" style="width: 240rpx;height: 240rpx;margin: 0 10rpx;" @tap="toPages(item.plusMagicList[1])"></image>
				<image :src="item.plusMagicList[2].picture" style="width: 240rpx;height: 240rpx;" @tap="toPages(item.plusMagicList[2])"></image>
			</view>
			<!-- 2_3编号样式 修改-->
			<view v-if="item.styleVal == '2_3'" class="magicMain2_3" style="padding: 0 15rpx;">
				<image :src="item.plusMagicList[0].picture" style="width: 188rpx;height: 188rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[0])"></image>
				<image :src="item.plusMagicList[1].picture" style="width: 188rpx;height: 188rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[1])"></image>
				<image :src="item.plusMagicList[2].picture" style="width: 188rpx;height: 188rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[2])"></image>
				<image :src="item.plusMagicList[3].picture" style="width: 188rpx;height: 188rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[3])"></image>
			</view>
			<!-- 3_1编号样式 -->
			<view v-if="item.styleVal == '3_1'"  style="display: flex;flex-direction: column;align-items: center;height: 372rpx;padding: 0 15rpx;">
				<view style="display: flex;align-items: center;height: 186rpx;">
					<image :src="item.plusMagicList[0].picture" style="width: 360rpx;height: 186rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[0])"></image>
					<image :src="item.plusMagicList[1].picture" style="width: 360rpx;height: 186rpx;" @tap="toPages(item.plusMagicList[1])"></image>
				</view>
				<view style="display: flex;align-items: center;height: 186rpx;margin-top: 5rpx;">
					<image :src="item.plusMagicList[2].picture" style="width: 360rpx;height: 186rpx;margin-right: 5rpx;" @tap="toPages(item.plusMagicList[2])"></image>
					<image :src="item.plusMagicList[3].picture" style="width: 360rpx;height: 186rpx;" @tap="toPages(item.plusMagicList[3])"></image>
				</view>
			</view>
			<u-gap height="18" bg-color="#f7f7f7" v-if="magicList.length > 0 "></u-gap>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'magic',
		props: {
			topbord: {
				type: Boolean,
				value: true
			},
			magicData: {
				type: Array,
				value: []
			}
		},
		data() {
			return {
				magicList: []
			};
		},
		mounted() {},
		watch: {
			magicData() {
				this.magicList = this.magicData;
			}
		},
		methods: {
			// gtMagic() {
			// 	this.$u.api.getHomeMagic().then(res => {
			// 		this.magicList = res;
			// 	});
			// },
			toPages(data) {
				let obj = data;
				if (obj.linkUrl) {
					uni.navigateTo({
						url: obj.linkUrl
					});
				}
			}
		}
	};
</script>

<style>
	.magicMain1 {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		/* height: 280rpx; */
		/* height: 360rpx; */
	}

	.magicMain {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		height: 360rpx;
	}

	.magicMain2_1 {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		height: 240rpx;
	}

	.magicMain2_3 {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		height: 188rpx;
	}
</style>
